<template>
  <div class="attraction-project">
    <el-header class="header">
      <el-button type="text" icon="el-icon-back" @click="goBack"></el-button>
      <span>景点项目</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-menu-item>选项1</el-menu-item>
          <el-menu-item>选项2</el-menu-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="亲子必玩" name="亲子必玩"></el-tab-pane>
      <el-tab-pane label="情侣最爱" name="情侣最爱"></el-tab-pane>
      <el-tab-pane label="勇敢刺激" name="勇敢刺激"></el-tab-pane>
    </el-tabs>
    <div class="project-list">
      <div v-for="(project, index) in projectList" :key="index" class="project-item">
        <img :src="project.image" alt="项目图片">
        <div class="project-info">
          <h3>{{ project.name }}</h3>
          <p>{{ project.type }} | {{ project.area }} | {{ project.reviews }}条评价</p>
          <p>{{ project.description }}</p>
          <div v-if="project.free">项目免费</div>
          <div v-if="project.expressPass">快速通道</div>
          <div v-if="project.limits" class="limit">
            <span>限制</span>
            <span>{{ project.limits }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'all',
      projectList: [
        {
          name: '霸天虎过山车',
          type: '游玩项目',
          area: '变形金刚基地',
          reviews: 567,
          description: '高空弹射超刺激',
          free: true,
          expressPass: true,
          limits: '身高1.32m以上',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.oJUAWDACmm_x-H-0GfBByAHaDQ?w=301&h=153&c=7&r=0&o=5&dpr=1.3&pid=1.7'
        },
        {
          name: '哈利·波特与禁忌之旅',
          type: '游玩项目',
          area: '魔法世界',
          reviews: 869,
          description: '跟随哈利沉浸式冒险',
          free: true,
          limits: '身高1.22m以上；体重272斤',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.JzK_eh7-YPJDI0zK3pnmWQHaEZ?w=290&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
        },
        {
          name: '侏罗纪世纪大冒险',
          type: '游玩项目',
          area: '努布拉岛',
          reviews: 888,
          description: '体验被恐龙追逐的感觉',
          free: true,
          expressPass: true,
          limits: '身高1.02m以上；体重226斤',
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.jR1c3qiHAWZ8AXx76_iKowHaEK?w=298&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
        },
        {
          name: '变形金刚火种源争夺战',
          type: '游玩项目',
          area: '变形金刚基地',
          reviews: 1226,
          description: '跟随汽车人沉浸式冒险',
          free: true,
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.QTNPdEdaOiaKGgeRZu0HQwHaFj?w=221&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
        }
      ]
    };
  },
  methods: {
    goBack() {
      console.log('返回上一页');
    }
  }
};
</script>

<style scoped>
.attraction-project {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #007bff;
  color: white;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-tabs {
  margin: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.project-list {
  padding: 15px;
}

.project-item {
  display: flex;
  margin-bottom: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.project-item img {
  width: 200px; /* 增加图片宽度 */
  height: 200px; /* 增加图片高度 */
  object-fit: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.project-info {
  padding: 15px;
}

.project-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.project-info p {
  margin-bottom: 5px;
  color: #666;
}

.limit {
  color: #ff5722;
}
</style>
